<script setup>
import {ref} from 'vue'
import logo from '@/assets/logo.svg'
import {userLogin} from "@/api/LoginApi.js";

import {useUserStore} from "@/stores/modules/user.js"
import router from "@/router/routeIndex.js";

const userStore = useUserStore();

const loginInfo = ref({
    userName: '',
    password: ''
})

const loginSystemBtn = async () => {
    const response = await userLogin(loginInfo.value.userName, loginInfo.value.password, error => {
        loginInfo.value.password = ''
    })
    if (response.data.result) {
        userStore.setToken(response.data.data.access_token)
        await router.push('/home')
    }
}

</script>

<template>
    <el-card class="login-container">
        <img :src="logo" alt="系统logo"/>
        <div class="login-title login-row">系统名称</div>
        <el-input v-model="loginInfo.userName" class="login-row" placeholder="请输入用户名"></el-input>
        <el-input v-model="loginInfo.password" type="password" class="login-row" placeholder="请输入密码"></el-input>
        <el-button type="success" @click="loginSystemBtn" class="login-row">系统登录</el-button>
    </el-card>
</template>

<style scoped lang="scss">

.login-container {
    width: 500px;
    text-align: center;
    margin: 100px auto auto;

    img {
        width: 75px;
    }

    .login-row {
        margin-top: 15px;
    }

    .login-title {
        font-size: 35px;
    }
}

</style>
